<template>
  <div class="page" :style="{
  backgroundImage: `url('assets/2/1.jpg')`,
  backgroundSize: 'cover'
}">
    <div class="container">
      <div class="back">
        <router-link to="/f" class="back-btn">
          <a-icon type="left-circle"/>
        </router-link>
        <span>
          <img src="assets/4/13.jpg">
        </span>
      </div>
      <div class="header">
        <header>智慧旅游系统分析结果</header>
      </div>
      <div class="main">
        <a-card class="card" title="客流预览">
          <p><a href="f/11.html">四姑娘山2016-2019年客流折线图</a></p>
          <p><a href="f/12.html">四姑娘山2016-2019年客流折线图(含时间轴)</a></p>
          <p><a href="f/13.html">四姑娘山2016-2019年客流折线图（罗列）</a></p>
          <p><a href="f/14.html">四姑娘山2016-2019年月平均客流条形图（含时间轴）</a></p>
          <p><a href="f/15.html">四姑娘山2016-2019年月平均客流条形图（罗列）</a></p>
        </a-card>
        <a-card class="card" title="天气数据统计">
          <p><a href="f/21.html">小金2016-2019年天气数据统计玫瑰图（含时间轴）</a></p>
          <p><a href="f/22.html">小金2016-2019年天气数据统计圆环图（含时间轴）</a></p>
          <p><a href="f/23.html">小金2016-2019年天气词云图</a></p>
          <p><a href="f/24.html">小金2016-2019年天气数据统计圆环图（罗列）</a></p>
          <p><a href="f/25.html">小金2016-2019年天气数据统计玫瑰图（罗列）</a></p>
        </a-card>
        <a-card class="card" title="客流分析">
          <p><a href="f/31.html">四姑娘山2016-2019年客流日历图（罗列）</a></p>
          <p><a href="f/32.html">四姑娘山2016-2019年客流箱线图</a></p>
          <p><a href="f/33.html">四姑娘山2016-2019年每月工作日与双休日平均客流数条形图（含时间轴）</a></p>
          <p><a href="f/34.html">四姑娘山2016-2019年每月工作日与双休日平均客流量条形图（罗列）</a></p>
          <p><a href="f/35.html">四姑娘山2016-2019年不同天气下的客流情况雷达图（罗列）</a></p>
        </a-card>
        <a-card class="card" title="气温详情">
          <p><a href="f/41.html">小金2016-2019年气温变化折线图</a></p>
          <p><a href="f/42.html">小金2016-2019年气温变化折线图（罗列）</a></p>
        </a-card>
        <a class="round-btn" href="f/50.html">
          <span>预测</span>
        </a>
      </div>
      <div class="footer">
        <scroll-box :data="arr">
          <scroll-line :arr="['序列', '日期', '最大客流' ,'最高温' ,'最低温' ,'天气' ,'风']"/>
        </scroll-box>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollBox from '@/components/base/ScrollBox'
import ScrollLine from '@/components/base/ScrollLine'
import { f } from '@/components/base/data'
export default {
  name: 'Category',
  components: { ScrollLine, ScrollBox },
  data() {
    return {
      arr: f
    }
  }
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 50px;
  max-width: 1400px;
  background-color: rgba(255, 255, 255, .5);
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 32px;
}

@media screen and (min-width: 720px) {
  .main {
    display: flex;
    flex-flow: row wrap;
    position: relative;
  }

  .main .card {
    margin: 50px;
    flex-grow: 1;
    width: 40%;
  }

  .main .round-btn {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}


.back a {
  background-color: transparent;
  font-size: 48px;
  color: dodgerblue;
  border: none;
}

.back a:hover {
  cursor: pointer;
  outline: none;
  color: red;
}

.back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.back span img {
  height: 40px;
}

@media screen and (max-width: 720px) {
  .main {

  }

  .main .round-btn {

  }
}

.card {
  background-color: rgba(255, 255, 255, .8);
}

.card p {
  transition: .4s all linear;
}

.card p a:hover {
  color: rgba(255, 0, 0, .4);
}

.card p a:visited {
  /*color: rgba(255, 0, 0, .8);*/
}

.card p:hover {
  padding-left: 20px;
}

.round-btn {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: rgba(30, 144, 255, .8);
  transform: translate(-50px, -50px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s all linear;
}

.round-btn:hover {
  cursor: pointer;
  background-color: rgba(30, 144, 255, 1);
  font-size: 24px;
}

.round-btn span {
  color: #ffffff;
  word-spacing: 1em;
}
</style>